<template>
    <div class="staff">
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <!-- 新增员工的表单信息 -->
            <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="sname">
                    <el-input placeholder="请输入姓名" v-model="form.sname"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="ssex">
                    <el-select v-model="form.ssex" placeholder="请选择">
                        <el-option label="男" :value="'男'"></el-option>
                        <el-option label="女" :value="'女'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="sage">
                    <el-input placeholder="请输入年龄" v-model="form.sage"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="did">
                    <el-select size="medium" v-model="form.did" placeholder="请选择" @change="updateDepartment">
                        <el-option v-for="data in deptData" :label="data.dname" :value="data.did" :key="data.did"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="工区" prop="wid">
                    <el-select size="medium" v-model="form.wid" placeholder="请选择" @change="updateWorkarea">
                        <el-option v-for="data in workareaData" :label="data.wname" :value="data.wid" :key="data.wid"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="sstatus">
                    <el-select size="medium" v-model="form.sstatus" placeholder="请选择" >
                        <el-option v-for="data in statusData" :label="data.label" :value="data.value" :key="data.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历" prop="sdegrees">
                    <el-select size="medium" v-model="form.sdegrees" placeholder="请选择" >
                        <el-option v-for="data in degreesData" :label="data.label" :value="data.value" :key="data.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="spost">
                    <el-select size="medium" v-model="form.spost" placeholder="请选择" >
                        <el-option v-for="data in postData" :label="data.label" :value="data.value" :key="data.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        
        <!-- 存放搜索框 -->
        <el-header>    
            <div class="staff-header">
                <el-button @click="handleAdd" type="primary">
                    + 新增
                </el-button>
                <!-- form搜索区域 -->
                <el-form :inline="true" :model="staffForm" class="staff-form">
                    <el-form-item>
                        <el-input placeholder="请输入员工姓名" v-model="name"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入部门名称" v-model="dname"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入工区名称" v-model="wname"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入状态" v-model="sstatus"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-button type="primary" @click="onSubmit">查询</el-button>

                            <el-button type="info" @click="resetParam">重置</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div>
        </el-header>

        <el-main>
            <!-- 存放说明信息，批量删除 -->
            <div>
                <el-row type="flex" class="row-bg">
                    <el-col :span="6"><div class="grid-content bg-purple">员工信息列表</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">共<span style="color: rgb(17, 101, 101);">{{total}}</span>条记录</div></el-col>
                    <!-- <el-col :span="6"><div class="grid-content bg-purple">共a条记录</div></el-col> -->
                </el-row>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-button type="danger" @click="batchDelete">批量删除</el-button>
                </el-row>
            </div>
            <div class="common-table">
                <!-- 存放表格 -->
                <el-table stripe :data="tableData" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column
                        prop="sid"
                        label="ID"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="sname"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="ssex"
                        label="性别">
                    </el-table-column>
                    <el-table-column
                        prop="sage"
                        label="年龄">
                    </el-table-column>
                    <el-table-column
                        prop="dname"
                        label="部门">
                    </el-table-column>
                    <el-table-column
                        prop="wname"
                        label="工区">
                    </el-table-column>
                    <el-table-column
                        prop="sstatus"
                        label="状态"
                        :formatter="formatStatus">
                    </el-table-column>
                    <el-table-column
                        prop="sdegrees"
                        label="学历">
                    </el-table-column>
                    <el-table-column
                        prop="spost"
                        label="职位">
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row.sid)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>

                <!-- 存放页码及跳转 -->
                <div class="pager">
                    <el-row type="flex" class="row-bg" justify="center">
                        <!-- 设置background属性可以为分页按钮添加背景色。 -->
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :current-page="pageNum"
                        :current-size="pageSize"
                        @current-change="handlePage">
                        </el-pagination>
                    </el-row>

                    <!-- 主页按钮 -->
                    <div>
                        <el-button icon="el-icon-s-home" circle @click="goSystemHome"></el-button>
                    </div>
                </div>
            </div>
        </el-main>

    </div>
</template>
<script>
    export default{
        data() {
            return {
                dialogVisible: false,
                form: {
                    sid: '',
                    sname: '',
                    ssex: '',
                    sage: '',
                    dname: '',
                    did: '',
                    wid: '',
                    wname: '',
                    sstatus: '',
                    sdegrees: '',
                    spost: ''
                },
                rules: {
                    sname: [
                        { required: true, message: '请输入姓名' }
                    ],
                    ssex: [
                        { required: true, message: '请选择性别' }
                    ],
                    sage: [
                        { required: true, message: '请输入年龄' }
                    ],
                    did: [
                        { required: true, message: '请选择所属部门' }
                    ],
                    wid: [
                        { required: true, message: '请选择所属工区' }
                    ],
                    sstatus: [
                        { required: true, message: '请选择员工状态' }
                    ],
                    sdegrees: [
                        { required: true, message: '请选择员工学历' }
                    ],
                    spost: [
                        { required: true, message: '请选择员工职位' }
                    ],
                },
                name:'',
                dname: '', // 部门名称搜索字段
                wname: '', // 工区名称搜索字段
                sstatus: '',
                tableData: [],
                deptData: [],
                workareaData: [],
                statusData: [
                    { id:1, value: '正常', label: '正常' },    
                    { id:2, value: '请假', label: '请假' },    
                    { id:3, value: '缺勤', label: '缺勤' }, 
                    { id:4, value: '迟到', label: '迟到' }    
                ],
                postData: [
                    { id:1, value: '项目管理人员', label: '项目管理人员' },    
                    { id:2, value: '项目监理人员', label: '项目监理人员' },    
                    { id:3, value: '项目施工人员', label: '项目施工人员' }    
                ],
                // "大专及以下" "本科", "硕士", "博士", "博士后"
                degreesData: [
                    { id:1, value: '大专及以下', label: '大专及以下' },    
                    { id:2, value: '本科', label: '本科' },    
                    { id:3, value: '硕士', label: '硕士' },
                    { id:4, value: '博士', label: '博士' },
                    { id:5, value: '博士后', label: '博士后' },
                ],
                modalType: 0, // 0表示新增的弹窗， 1表示编辑
                total: 0, //当前的总条数
                pageNum: 1,
                pageSize: 10,
                staffForm: {
                    name: '',
                    dname: '',
                    wname: '',
                    sstatus: ''
                },
                sels: [], //当前选框选中的值
            }
        },
        methods: {
            // 根据文字设置样式
            formatStatus(row) {
                switch (row.sstatus) {
                    case '正常':
                        return <span class="status-normal">正常</span>;
                    case '请假':
                        return <span class="status-leave">请假</span>;
                    case '缺勤':
                        return <span class="status-absent">缺勤</span>;
                    case '迟到':
                        return <span class="status-late">迟到</span>;
                    default:
                        return row.sstatus;
                }
            },
            // 当用户选择部门和工区时，form 对象中的 dname 和 wname 属性会自动更新，确保传递给后端的数据包括了所需的信息。
            updateDepartment() {
                const selectedDepartment = this.deptData.find(dept => dept.did === this.form.did);
                if (selectedDepartment) {
                    this.form.dname = selectedDepartment.dname;
                }
            },
            updateWorkarea() {
                const selectedWorkarea = this.workareaData.find(area => area.wid === this.form.wid);
                if (selectedWorkarea) {
                    this.form.wname = selectedWorkarea.wname;
                }
            },

            goSystemHome(){
                this.$router.push('/systemHome')
                this.$message({
                    showClose: true,
                    message: '成功返回后台首页',
                    type: 'success'
                });
            },
            // resetForm() {
            //     this.$refs.form.resetFields();
            //     // this.form.sname=''
            // },
            resetForm() {
                this.$refs.form.resetFields();
                this.sname= '';
                this.ssex= '';
                this.sage= '';
                this.dname= '';
                this.did= '';
                this.wid= '';
                this.wname= '';
                this.sstatus= '';
                this.sdegrees= '';
                this.spost= '';
            },
            
            doSave(){
                this.$axios.post(this.$httpUrl+'/staff/addStaff',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            doMod(){
                this.$axios.post(this.$httpUrl+'/staff/edit',this.form).then(res=>res.data).then(res=>{
                    console.log("编辑操作")
                    console.log(res)
                    if(res.code==200){

                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.loadPost()
                        this. resetForm()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }

                })
            },
            submit(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.doSave();
                        } else {
                            this.doMod();
                        }
                    } else {


                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            // 弹窗关闭的时候
            handleClose() {
                this.$refs.form.resetFields()
                this.dialogVisible = false
                this.resetForm()
            },
            cancel() {
                this.handleClose()
            },
            handleEdit(row) {
                this.modalType = 1
                this.dialogVisible = true

                //注释掉的这个拷贝方法会出错
                // 注意需要对当前行数据进行深拷贝，否则会出错
                // this.form = JSON.parse(JSON.stringify(row))


                this.$nextTick(()=>{
                    //赋值到表单
                    this.form.sid = row.sid
                    this.form.sname= row.sname;
                    this.form.ssex= row.ssex;
                    this.form.sage= row.sage;
                    this.form.dname= row.dname;
                    this.form.did= row.did;
                    this.form.wid= row.wid;
                    this.form.wname= row.wname;
                    this.form.sstatus= row.sstatus;
                    this.form.sdegrees= row.sdegrees;
                    this.form.spost= row.spost;
                })
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$axios.get(this.$httpUrl+'/staff/del?id='+id).then(res=>res.data).then(res=>{
                            console.log(res)
                            if(res.code==200){
                                this.$message({
                                    message: '删除成功！',
                                    type: 'success'
                                });
                                this.loadPost()
                            }else{
                                this.$message({
                                    message: '操作失败！',
                                    type: 'error'
                                });
                            }

                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                });
            },
           //获取选中的值
            handleSelectionChange(sels) {
                this.sels = sels;
                console.log("选中的值",sels.map((item) => item.sid));
            },
            //批量删除执行操作
            batchDelete() {
                // 删除前的提示
                this.$confirm("确认删除记录吗?", "提示", {
                    type: "warning",
                }).then(() => {
                let ids = this.sels.map((item) => item.sid);
                // 请求接口
                    this.$axios.post(this.$httpUrl + '/staff/batchDelete', { ids: ids }).then((res) => {
                    if (res.data.code == "200") {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.loadPost()
                    }else{
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                });
                }).catch(error => {
                    console.error(error);
                });
            },
            handleAdd() {
                this.modalType = 0
                this.dialogVisible = true
            },
            // 获取列表的数据
            loadPost(){
                this.$axios.post(this.$httpUrl+'/staff/getStaff',{
                    pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    param:{
                        name:this.name,
                        dname: this.dname,
                        wname: this.wname,
                        sstatus: this.sstatus
                    }
                }).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.tableData=res.data
                        this.total=res.total
                    }else{
                        alert('获取数据失败')
                    }

                }),
                this.$axios.get(this.$httpUrl+'/dept/list').then(res=>{
                    console.log(res)
                        this.deptData=res.data

                }),
                this.$axios.get(this.$httpUrl+'/workarea/list').then(res=>{
                    console.log(res)
                        this.workareaData=res.data

                })
            },
            // 选择页码的回调函数
            handlePage(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val
                this.loadPost()
            },
            // 列表的查询
            onSubmit() {
                this.pageNum = 1
                this.loadPost()
            },
            resetParam(){
                this.name=''
                this.dname=''
                this.wname=''
                this.sstatus=''
                this.loadPost()
            },
        },
        mounted () {
            this.loadPost()
        },
    }
    
</script>

<style lang="less" scoped>
.staff {
    height: 90%;
    .staff-header {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        align-items: center;
        
    }
    .common-table {
        position: relative;
        height: calc(100% - 62px);
        .pager {
            bottom: 0;
            margin-top: 20px;   
        }
    }
    .status-normal {
        color: green; // 正常状态的示例颜色
        font-weight: bold; // 正常状态的示例字体加粗
    }
    .status-leave {
        color: orange; // 请假状态的示例颜色
        font-style: italic; // 请假状态的示例字体样式
    }
    .status-absent {
        color: red; // 缺勤状态的示例颜色
        text-decoration: line-through; // 缺勤状态的示例文本装饰
    }
    .status-late {
        color: blue; // 缺勤状态的示例颜色
        text-decoration: line-through; // 缺勤状态的示例文本装饰
    }
}
</style>
